@use '../variables' as *;
@use '../mixins/outline' as *;

// DatePicker Component styles
@import '~react-datepicker/dist/react-datepicker.css';
@import '~react-datepicker/dist/react-datepicker-cssmodules.css';

.drp-button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drp-label {
  margin-bottom: -10px;
}

.drp-container {
  position: relative;
  svg {
    margin-right: 5px;
  }

  .drp-dropdown {
    background-color: var(--ps-dropdown-background);
    display: none;
    position: absolute;
    top: 45px;
    right: 0px;
    width: 400px;
    padding: 20px 20px 20px 20px;
    border: 1px solid var(--ps-ui-border);
    box-shadow: 0px 10px 20px var(--ps-dropdown-shadow);
    border-radius: 4px;

    // so that's above any overlay
    z-index: 999;
  }

  h4:nth-child(1),
  h5:nth-child(1) {
    margin-top: 0;
  }

  h4,
  h5 {
    margin: 10px 0;
  }

  .drp-presets {
    display: flex;
    flex-direction: row;

    // cancel the padding from drp-container
    // so that it spams the whole row
    margin-left: -20px;
    margin-right: -20px;

    .drp-preset-column {
      flex: 1;
      display: flex;
      align-items: stretch;
      flex-direction: column;
    }
  }

  .drp-custom {
    margin-top: 20px;
  }

  .drp-preset {
    @include outline;

    border: none;
    text-align: left;
    padding: 2px 0;
    // compensates for the negative margin in .drp-presets
    padding-left: 20px;
    color: var(--ps-ui-foreground-text);

    // give some room between the text and the icon
    // https://web.dev/learn/css/logical-properties/#solving-the-icon-issue
    svg {
      margin-inline-start: 0.5em;
    }

    &:hover,
    &.active {
      color: var(--ps-neutral-2);
      background: var(--ps-ui-element-bg-highlight);
    }

    &:hover {
      cursor: pointer;
    }
  }

  &.opened {
    .drp-dropdown {
      display: block;
    }
  }

  .drp-calendar-input-group {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
  }
}

// Custom Date Range block
.drp-custom {
  // label should be on its own line
  label {
    display: block;
  }

  .until {
    margin-top: 10px;
  }

  // submit button
  button[type='submit'] {
    margin-top: 20px;
  }
}

// range picker custom styles
.react-datepicker__day--in-range {
  background-color: var(--ps-blue-primary) !important;
  color: var(--ps-neutral-2) !important;
}
.react-datepicker__day--in-selecting-range {
  background: none;
  color: var(--ps-neutral-1);
}
.react-datepicker__day--in-range:hover {
  background-color: var(--ps-blue-primary);
  color: var(--ps-neutral-2);
}

.react-datepicker__day--disabled {
  background-color: transparent;
  color: var(--ps-ui-foreground-text);
}

.react-datepicker__day--in-selecting-range:hover {
  color: var(--ps-neutral-2);
}
